<script setup>
    import { ref } from 'vue';
    const phone = ref('')
    const email = ref('')
    const password = ref('')
</script>

<template>
    <div id="userSafe" class="userSafe">
        <div class="left">
            <div class="category1"><router-link to="/user/UserInfo">个人资料</router-link></div>
            <div class="category2"><router-link to="/user/UserSafe">安全设置</router-link> </div>
        </div>
        <div class="right">
            <div class="formInfo">
                <div class="formItem" style="margin-top:70px">
                    <p>手机号码</p>
                    <input v-model="phone" placeholder="请绑定手机号码" />
                </div>
                <div class="formItem">
                    <p>邮箱地址</p>
                    <input v-model="email" placeholder="请绑定邮箱" />
                </div>
                <div class="formItem">
                    <p>登陆密码</p>
                    <input v-model="password" type="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="prompt">
                    <p class="promptH">手机号码</p>
                    <p class="promptC">绑定手机号码后可快速找回密码及其他服务</p>
                    <p class="promptH">邮箱</p>
                    <p class="promptC">绑定邮箱后可快速找回密码及其他服务</p>
                    <p class="promptH">登陆密码</p>
                    <p class="promptC">请注意保护隐私，勿泄露密码</p>
                    <div class="other">
                        <p class="promptH">其他</p>
                        <p class="promptC">如何注销账号?<span>注销账号</span></p>
                    </div>
            </div>
        </div>
    </div>
   
</template>

<style lang="scss">
body{
    background-color: rgba(243, 242, 242, 0.486);
}
.userSafe{
    display: flex;
    .left{
        background: white;
        width:280px;
        height: 120px;
        // font-size: 12px;
        margin-left: 180px;
        margin-top: 30px;
        div{
            width:210px;
            height: 45px;
            margin:10px 0 ;
            line-height: 45px;
            text-indent: 2em;
            a{
                color: black;
                text-decoration: none;
            }
        }
        div:hover{
            color: rgb(64, 158, 255);
            cursor: pointer;
            border-left: rgb(64, 158, 255) solid 2px;
        }
    }
    .right{
        width: 1100px;
        height: 800px;
        margin-left: 15px;
        margin-top: 30px;
        background-color: white;
        display: flex;
        flex-direction: row;
        .formInfo{
            width: 800px;
            height: 800px;
            margin-left: 50px;
           .formItem{
                input{
                    border: none;
                    border-bottom: 1px solid rgba(151, 150, 150, 0.39);
                    line-height: 50px;
                    font-size: 15px;
                    width: 700px;
                }
                input:focus{
                    outline: none;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.726);
                }
           }
           .formItem::after{
                content: '绑定';
                font-size: 15px;
                cursor: pointer;
                margin-left: -35px;
                color: rgb(64, 158, 255);
            }
        }
        .prompt{
            padding: 50px 40px;
            width: 220px;
            height: 700px;
            background: rgba(197, 196, 196, 0.075);
            .promptC{
                font-size: 14px;
                color: rgb(126, 125, 125);
                margin-bottom: 30px;
            }
            .other{
                border-top: solid 1px rgba(0, 0, 0, 0.233);
                .promptH{
                    margin-top: 30px;
                }
                span{
                    display: inline-block;
                    color:rgb(64, 158, 255);
                    text-indent: 2em;
                    cursor: pointer;
                }
            }
        }
    }
}    
</style>